<template>
  <div class="login-wrap">
    <el-form class="login-container" :model="userModel" >
      <h1 class="title">找回密码</h1>
      <el-form-item  prop="userAccount" style="padding-bottom: 5px">
        <el-input type="text" v-model="userModel.email" placeholder="用户邮箱" ></el-input>
      </el-form-item>
      <el-form-item  prop="code" style="padding-bottom: 5px">
        <el-input type="text" v-model="userModel.code" placeholder="请输入验证码" autocomplete="off"></el-input>
        <el-button @click="sendCode()" type="primary">点击发送验证码</el-button>
      </el-form-item>
      <el-form-item  prop="password" style="padding-bottom: 5px">
        <el-input type="password" v-model="userModel.password" placeholder="新密码" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item  prop="checkPassword" style="padding-bottom: 5px">
        <el-input type="password" v-model="userModel.checkPassword" placeholder="确认密码" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="doBackPassword()" style="width: 100%;">注册</el-button>
      </el-form-item>
      <el-row style="text-align: center;margin-top: -10px;display: flex;justify-content: space-between">
        <el-link type="primary"></el-link>
        <el-link type="primary" @click="toLogin">返回登录</el-link>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>

import {reactive, ref} from "vue";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";
import myAxios from "../../plugins/myAxios.js";
const router = useRouter();


const userModel = reactive({
  email:'',
  password:'',
  checkPassword:'',
  code:''
})


//返回登录页
const toLogin = ()=>{
  router.push({path:'/login'});
}

/**
 * 发送验证码
 * @returns {Promise<MessageHandler>}
 */
const sendCode = async () => {
  let email = userModel.email;
  if(email.trim() === ''){
    return ElMessage({
      type:"warning",
      message:"请输入邮箱"
    })
  }

  const res = await myAxios.post('/user/sendCode', {
    email: email
  })
  console.log(res)
  if(res.code === 0 && res.data){
    return ElMessage({
      type:"success",
      message:"发送验证码成功，请查看邮箱"
    })
  }else if(res.code === 50102){
    return ElMessage({
      type:"error",
      message:"邮箱未注册"
    })
  }else{
    return ElMessage({
      type:"error",
      message:"系统错误"
    })
  }

}

/**
 * 确认找回密码  根据邮箱更新用户密码
 * @returns {Promise<boolean>}
 */
const doBackPassword = async ()=>{
  let email = userModel.email;
  if(email.trim() === ''){
    return ElMessage({
      type:"info",
      message:"邮箱不能为空"
    })
  }

  if(userModel.code.trim() === ''){
    return ElMessage({
      type:"info",
      message:"验证码不能为空"
    })
  }

  if(userModel.password.trim() === ''|| userModel.checkPassword.trim() === '' ||userModel.password !== userModel.checkPassword){
    return ElMessage({
      type:"info",
      message:"两次输入的密码不一致"
    })
  }

  const res = await myAxios.post('/user/forgotPassword', {
    email: userModel.email,
    verificationCode:userModel.code,
    newPassword:userModel.checkPassword
  })
  console.log("++++++++")
  console.log(res)
  if(res.code === 0 && res.data){
     ElMessage({
      type:"success",
      message:"找回密码成功"
    })
    await router.push({path: '/login'});
  }else if(res.code === 50104){
     ElMessage.error("密码不合法")
  } else if(res.code === 50102){
     ElMessage.error("邮箱未被注册")
  }else if(res.code === 50103){
     ElMessage.error("验证码错误")
  } else{
    ElMessage.error("系统错误")
  }
}

</script>
<style scoped lang="less">
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-image: url("../../assets/img/background.jpg");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
}

.login-container {
  border-radius: 10px;
  margin: 0 auto;
  width: 400px;
  padding: 30px 35px 25px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
  margin: 0 auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>